import './App.css'
import {
  Suspense,
  lazy,
  useEffect
} from 'react';
import {
  Routes,
  Route,
  Navigate
} from 'react-router-dom'
import MainLayout from '@/components/MainLayout'
import BlankLayout from '@/components/BlankLayout'
import useUserStore from './store/useUserStore';

// 页面组件
const Home = lazy(() => import('@/pages/Home'));
const Cart = lazy(() => import('@/pages/Cart'));
const AIChat = lazy(() => import('@/pages/AIChat'));
const Community = lazy(() => import('@/pages/Community'));
const Profile = lazy(() => import('@/pages/Profile'));
const ProductDetail = lazy(() => import('@/pages/ProductDetail'));
const Search = lazy(() => import('@/pages/Search'));
const Login = lazy(() => import('@/pages/Login'));

// 受保护的路由组件
const ProtectedRoute = ({ children }) => {
  const { isLogin } = useUserStore();
  return isLogin ? children : <Navigate to="/login" />;
};

function App() {
  const { initUserInfo } = useUserStore();

  // 初始化用户信息
  useEffect(() => {
    initUserInfo();
  }, [initUserInfo]);

  return (
    <>    
      <Routes >
        {/* 无布局页面 */}
        <Route element={<BlankLayout />}>
          <Route path="/login" element={<Login />} />
          <Route path="/search" element={<Search />} />
          <Route path="/product/:id" element={<ProductDetail />} />
        </Route>
        
        {/* 404页面 */}
        <Route path="*" element={<Navigate to="/home" />} />
      </Routes>
    </>
  )
}

export default App;